<template>
  <div>
    <el-row>
      <el-button
        size="mini"
        type="primary"
        icon="el-icon-refresh-left"
        plain
        @click="openDataList(true)"
        >刷新页面</el-button
      >
      <el-button
        size="mini"
        type="success"
        icon="el-icon-plus"
        plain
        @click="showAddModule()"
        >增加接口</el-button
      >
      <el-button
        size="mini"
        type="warning"
        icon="el-icon-edit"
        plain
        @click="showEditModule()"
        >修改接口</el-button
      >
      <el-button
        size="mini"
        type="danger"
        icon="el-icon-refresh"
        plain
        @click="InitModule()"
        >刷新接口</el-button
      >
      <!-- <el-button type="danger" @click="openData(true)"
        >停止服务端接口服务</el-button
      > -->
      <div v-dialogdrag>
        <el-dialog
          title="增加接口"
          v-model="FShowAddModule"
          :close-on-click-modal="false"
        >
          <el-row>
            <el-input
              placeholder="请输入接口代码"
              v-model="FNewModule.FModuleCode"
            ></el-input>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-input
              placeholder="请输入接口标签"
              v-model="FNewModule.FModuleCaptoin"
            ></el-input>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-select
              v-model="FNewModule.FPModuleID"
              placeholder="请选择上级接口"
            >
              <el-option
                v-for="item in FModuleList"
                :key="item.FModuleID"
                :label="item.FModuleCaptoin"
                :value="item.FModuleID"
              >
                <span style="float: left">{{ item.FModuleCaptoin }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.FModuleCode
                }}</span>
              </el-option>
            </el-select>
          </el-row>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="FShowAddModule = false">取 消</el-button>
              <el-button type="primary" @click="addModule()">确 定</el-button>
            </span>
          </template>
        </el-dialog>
      </div>
    </el-row>
    <div style="height: 5px"></div>
    <el-row>
      <el-col :span="22">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
        </el-input>
      </el-col>
      <el-col :span="2"> </el-col>
    </el-row>
    <div style="height: 15px"></div>
    <el-row style="min-height: 500px; margin-bottom: 20px">
      <el-col :span="5">
        <el-tree
          style="overflow: auto; height: 600px"
          :data="treeData"
          default-expand-all
          :filter-node-method="filterNode"
          @node-click="treeNodeClick"
          ref="tree"
        >
        </el-tree>
      </el-col>
      <el-col :span="19">
        <el-table
          :data="FFilterModuleList"
          border
          height="250"
          style="height: 600px"
          highlight-current-row
        >
          <el-table-column prop="FModuleCode" label="接口代码" width="180">
          </el-table-column>
          <el-table-column prop="FModuleCaptoin" label="接口名称" width="180">
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template #default="scope">
              <el-button
                type="primary"
                plain
                icon="el-icon-edit"
                size="mini"
                @click="editModule(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="warning"
                plain
                icon="el-icon-delete"
                size="mini"
                @click="delModule(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import store, { IMenuItem } from "@/store";
import elmHelper from "@/views/model/elmHelper";
import { constHelper } from "@/baselib/module/BaseClass";
import { TModuleBase } from "@/baselib/module/BaseClass";
import TFormBase from "@/views/BaseForm";

//配合着用
@Options({
  name: "ModuleManage",
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  data() {},
  methods: {},
})
export default class TFormModuleManage extends TFormBase {
  private filterText: string = "";
  private FModuleList: TModuleBase[] = [];
  private FFilterModuleList: TModuleBase[] = [];
  private FNewModule: TModuleBase = new TModuleBase();
  private FShowAddModule: boolean = false;
  private FDelPass: string = "";
  private treeData: any[] = [];
  private FIndexModule: TModuleBase = new TModuleBase();

  public created() {
    this.openDataList();
  }
  private async openDataList(qHint: boolean = false) {
    let lResult = await this.$myModuleAPI.getModuleList();
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgHintNotClose(lResult.resultMsg);
      return;
    }
    this.FModuleList = lResult.resultData;
    this.FFilterModuleList = this.FModuleList;
    this.treeData = elmHelper.dataToTree(
      this.FModuleList,
      "FModuleID",
      "FPModuleID",
      "FModuleCaptoin",
      "FModuleCode"
    );
    if (qHint) {
      this.$myMsgHelp.msgHintAutoClose("刷新数据成功");
    }
  }
  private filterNode(value: string, data: any): boolean {
    if (!value) return true;
    return data.label.toLowerCase().indexOf(value.toLowerCase()) !== -1;
  }
  private async delModule(qModule: TModuleBase) {
    let lOK = await this.$myMsgHelp.msgDialogConfirm("确定删除记录");
    if (lOK) {
      let lResult = await this.$myModuleAPI.delModuleInfo(qModule.FModuleID);
      if (!lResult.resultSuccess) {
        this.$myMsgHelp.msgHintNotClose(lResult.resultMsg);
        return;
      }
      let lTempI = this.FModuleList.findIndex((value) => {
        return value.FModuleID == qModule.FModuleID;
      });
      if (lTempI >= 0) {
        this.FModuleList.splice(lTempI, 1);
        this.FFilterModuleList = this.FModuleList;
        this.treeData = elmHelper.dataToTree(
          this.FModuleList,
          "FModuleID",
          "FPModuleID",
          "FModuleCaptoin",
          "FModuleCode"
        );
      }
      this.$myMsgHelp.msgHintAutoClose("删除成功");
    }
  }
  private showAddModule() {
    this.FNewModule = new TModuleBase();
    this.FShowAddModule = true;
  }
  private showEditModule() {
    if (this.FIndexModule.FModuleID) {
      this.FNewModule = this.FIndexModule;
      this.FShowAddModule = true;
    } else {
      this.$myMsgHelp.msgDialog("请先在左边树形选择一个节点进行修改接口");
    }
  }
  private async addModule() {
    let lResult = await this.$myModuleAPI.addModule(this.FNewModule);
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgHintNotClose(lResult.resultMsg);
      return;
    }
    this.FShowAddModule = false;
    this.openDataList();
    this.$myMsgHelp.msgHintAutoClose("添加接口成功");
  }
  private treeNodeClick(data: any) {
    this.FFilterModuleList = [];
    this.FModuleList.forEach((item) => {
      if (item.FModuleID == data.id || item.FPModuleID == data.id) {
        this.FFilterModuleList.push(item);
      }
      if (item.FModuleID == data.id) {
        this.FIndexModule = item;
      }
    });
  }
  private async InitModule() {
    let lResult = await this.$myModuleAPI.initModule();
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgHintNotClose(lResult.resultMsg);
      return;
    }
    this.$myMsgHelp.msgHintAutoClose("刷新服务端接口配置成功");
  }
  private editModule(qModule: TModuleBase) {
    //跳转到编辑界面
    let lTag: IMenuItem = {
      menuIndexName: "TFormModuleEdit-" + qModule.FModuleID,
      menuComponent: "TFormModuleEdit",
      menuTitle: "模块配置_" + qModule.FModuleCaptoin,
      menuIcon: "",
      menuParams: { moduleID: qModule.FModuleID }, //参数
      menuChildren: [],
    };
    this.$myEvenBus.addTag(lTag);
  }
}
</script>

<style>
.el-tree-node.is-current > .el-tree-node__content {
  background-color: #ddf7b5 !important;
  color: #57abfa !important;
}
.el-table th.el-table__cell {
  background-color: #e4f0fc;
}
</style>